import React, {useEffect, useState} from 'react';
import {useNavigation} from '@react-navigation/native';
import {View, Text, ScrollView, Image, TouchableOpacity} from 'react-native';
import AreaView from '../../components/Layout/AreaView';
import {getUserProfile} from '../../service/user';
import BaseUrl from '../../config/BaseUrl';

import styles from './style.js';

const nav = [
  {
    name: '订单',
    icon: require('../../assets/images/me/icon1.png'),
    route: 'MyOrder',
  },
  {
    name: '成绩',
    icon: require('../../assets/images/me/icon2.png'),
    route: 'MyScore',
  },
  {
    name: '作业',
    icon: require('../../assets/images/me/icon3.png'),
    route: 'MyJob',
  },
  {
    name: '课程',
    icon: require('../../assets/images/me/icon4.png'),
    route: 'MyTimeTable',
  },
  {
    name: '题库',
    icon: require('../../assets/images/me/icon5.png'),
    route: 'MyDataBase',
  },
];

const list = [
  {
    name: '我的课程',
    icon: require('../../assets/images/me/list_icon1.png'),
    route: 'MyTimeTable',
  },
  // {
  //   name: '我的问题',
  //   icon: require('../../assets/images/me/list_icon2.png'),
  //   route: 'MyQuestion',
  // },
  // {
  //   name: '我的下载',
  //   icon: require('../../assets/images/me/list_icon3.png'),
  //   route: 'MyDownload',
  // },
  // {
  //   name: '我的收藏',
  //   icon: require('../../assets/images/me/list_icon4.png'),
  //   route: 'MyCollect',
  // },
  {
    name: '优惠卷',
    icon: require('../../assets/images/me/list_icon5.png'),
    route: 'DiscountCoupon',
  },
  {
    name: '我的报名',
    icon: require('../../assets/images/me/list_icon6.png'),
    route: 'MyApply',
  },
  // {
  //   name: '我的发票',
  //   icon: require('../../assets/images/me/list_icon7.png'),
  //   route: 'MyInvoice',
  // },
  // {
  //   name: '意见反馈',
  //   icon: require('../../assets/images/me/list_icon8.png'),
  //   route: '',
  // },
  {
    name: '系统设置',
    icon: require('../../assets/images/me/list_icon9.png'),
    route: 'Set',
  },
];

const Me = () => {
  const navigation = useNavigation();
  const [userProfileData, setUserProfileData] = useState();
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', async () => {
      getUserProfile().then((res) => {
        console.log(res.data);
        setUserProfileData(res.data);
      });
    });
    return unsubscribe;
  }, [navigation]);
  return (
    <AreaView>
      <ScrollView showsVerticalScrollIndicator={false} style={styles.container}>
        <TouchableOpacity
          activeOpacity={1}
          style={styles.avatar}
          onPress={() => {
            navigation.push('PersonDetail');
          }}>
          <Image
            source={{uri: BaseUrl.imgurl + userProfileData?.image}}
            style={styles.avatar_img}
          />
          <Text style={styles.avatar_text}>
            {userProfileData?.nickName || userProfileData?.userName}
          </Text>
        </TouchableOpacity>
        <View style={styles.nav_container}>
          {(nav || []).map((item, index) => (
            <TouchableOpacity
              style={styles.nav_btn}
              key={index}
              onPress={() => {
                item.route &&
                  navigation.push(item.route, {custId: userProfileData.custId});
              }}>
              <Image style={styles.nav_icon} source={item.icon} />
              <Text style={styles.nav_text}>{item.name}</Text>
            </TouchableOpacity>
          ))}
        </View>
        <View style={styles.study_history}>
          {/* <View style={styles.content_head}>
            <View style={styles.head_left}>
              <View style={styles.title_line} />
              <Text style={styles.head_title}>学习记录</Text>
            </View>
            <TouchableOpacity
              style={styles.head_more}
              onPress={() => navigation.push('StudyHistory')}>
              <Text style={styles.more_text}>更多</Text>
              <Image
                style={styles.right_icon}
                source={require('../../assets/images/home/back_right.png')}
              />
            </TouchableOpacity>
          </View> */}
          {/* <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            style={styles.live_container}>
            {[1, 2, 3, 4, 5, 6].map((item) => (
              <TouchableOpacity  activeOpacity={1} key={item} style={styles.live_list}>
                <View>
                  <Image style={styles.live_cover} />
                  <Image
                    style={styles.start}
                    source={require('../../assets/images/video_stop.png')}
                  />
                </View>
                <Text style={styles.live_text} numberOfLines={1}>
                  文字描述文字描述文字描述文字描述文文字描述文字描述文字描述文字描述文
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView> */}
        </View>
        <View style={styles.gap} />
        {(list || []).map((item, index) => (
          <View key={index} style={styles.list_container}>
            <TouchableOpacity
              style={styles.list}
              onPress={() => {
                item.route &&
                  navigation.push(item.route, {custId: userProfileData.custId});
              }}>
              <View style={styles.list_left}>
                <Image style={styles.list_icon} source={item.icon} />
                <Text style={styles.list_text}>{item.name}</Text>
              </View>
              <Image
                style={styles.list_right}
                source={require('../../assets/images/me/right.png')}
              />
            </TouchableOpacity>
          </View>
        ))}
        <View style={styles.gap} />
      </ScrollView>
    </AreaView>
  );
};
export default Me;
